<template>
	<view class="content">
		<view class="navbar">
			<view 
				v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)"
			>
				{{item.text}}
			</view>
		</view>
		<view v-if="orderList.length === 0" class="order-con">
			<image src="../../../static/images/no_order.png" mode="aspectFit"></image>
			<view class="empty-tips">亲，您还没有订单哦</view>
		</view>
		<view class="appointments" v-else>
			<scroll-view scroll-y="true" show-scrollbar="true" scroll-top="0">
				<view class="appo-item" v-for="(item,index) in orderList" :key="index">
					<view class="item-top">
						<view class="item-top-left">
							<image :src="item.userAvatar" class="avatar"></image>
							<view class="_flex_column technician_name">
								<text class="technicianName">{{item.userName}}</text>
								<view class="technicianNum-box">
									<text class="technicianNum">{{item.userTel}}</text>
								</view>
							</view>
						</view>
						<view class="item-top-right">{{item.shopName}}</view>
					</view>
					<view class="item-down">
						<view class="item-top-left">
							<!-- <view class="">预约时限：一小时前可以取消预约</view> -->
							<view class=""> 预约项目：{{item.productName}}</view>
							<view class=""> 预约时间：{{item.bookTime.replace('T', ' ')}}</view>
						</view>
						<view class="item-top-right item-down-right" v-if="item.status == 'NOT_SERVED'" @tap="accomplishOrder(item.id)">完成订单</view>
						<view class="item-top-right item-down-right margin-left cancel-order" v-if="item.status == 'NOT_SERVED' || item.status == 'UNPAID'" @tap="cancelOrder(item.id)">结束预约</view>
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>
			<!-- 没有数据展示图片
			<view v-else></view> -->
		</view>
	</view>
</template>


<script>
	import {orderList,cancelOrder,accomplishOrder} from '@/api/index.js';
	import config from '@/config/index';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	var _self,
	pageSize = 10,
	currentPage =1;// 定义全局参数,控制数据加载
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				tabCurrentIndex: 0,
				orderState: 1,
				orderList:[],
				loadingType: 'more', //加载更多状态
				navList: [{
						state: null,
						text: '未完成',
						loadingType: 'more',
					},
					{
						state: 0,
						text: '已完成',
						loadingType: 'more',
					},{
						state: 1,
						text: '已取消',
						loadingType: 'more',
					}
				],
			}
		},
		onShow() {
		},
		onLoad() {
			_self = this;
			currentPage=1;
			_self.getOrderList(_self.orderState)
		},
		methods: {
			accomplishOrder(id){
				let _that = this
				uni.showModal({
					title: '提示',
					content: '确定完成订单？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							accomplishOrder(id).then(re =>{
								console.log(re)
								currentPage=1;
								this.orderList=[];
								_self.getOrderList(_self.orderState)
								setTimeout(this.$api.msg('订单已完成'),3000)
								// this.$api.msg('订单已完成');
							}).catch(re=>{
								console.log(re);
							});
						}
					}
				})
			},
			//取消订单
			cancelOrder(id){
				let _that = this
				uni.showModal({
					title: '提示',
					content: '确定结束预约？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							cancelOrder(0,id).then(re =>{
								currentPage=1;
								this.orderList=[];
								_self.getOrderList(_self.orderState)
								setTimeout(this.$api.msg('结束预约成功'),3000)
							}).catch(re=>{
								console.log(re);
							});
						}
					}
				})
			},
			//顶部tab点击
			tabClick(index){
				_self.orderList=[];
				currentPage=1;
				this.tabCurrentIndex = index;
				console.log(index)
				if(index == 0){
					this.orderState = 1
				}else if(index == 1){
					this.orderState = 2
				}else if(index == 2){
					this.orderState = 3
				}else{
					return
				}
				_self.getOrderList(this.orderState)
			},
			getOrderList(orderState){
				let _that = this
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				orderList(0,currentPage,pageSize,this.orderState).then(re =>{
					if(re.length <= pageSize){
						uni.hideLoading();
						this.loadingType = 'nomore';
					}else{
						uni.hideLoading();
						this.loadingType = 'more'
					}
					if (re== '') {//没有数据
						_self.loadingType = 'nomore';
						uni.hideNavigationBarLoading();//关闭加载动画
						return;
					}
					if(currentPage==1){
						_self.orderList =re;
					}else{
						_self.orderList = _self.orderList.concat(re);//将数据拼接在一起
					}
					console.log(re);
					uni.hideLoading();
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					
				}).catch(re=>{
					console.log(re);
				});
			},
			//swiper 切换
			changeTab(e){
				_self.orderList=[];
				currentPage=1;
				this.tabCurrentIndex = e.target.current;
				this.orderState = e.target.current +1
				this.getOrderList(this.orderState);
			},
		}
	}
</script>

<style lang="scss">
	.navbar{
		display: flex;
		height: 40px;
		padding: 0px 5px 8rpx;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: fixed;
		width:100%;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 28upx;
			font-weight: normal;
			color: #333;
			position: relative;
			&.current{
				color: #FF203B;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 14px;
					height: 0;
					border-bottom: 5px solid #FF203B;
					border-radius: 400rpx;
				}
			}
		}
	}
	/* tab颜色 */
	.nav{
		background: #fff;
	}
	.text-orange, .line-orange, .lines-orange{
		color:#FF0000;
	}
	.nav .cu-item{
		font-size: 28rpx;
		height:80rpx;
	}
	.order-con{
		text-align: center;
		.empty-tips{
			margin-top:-30rpx;
			color: #999;
		}
	}
	.order-con image{
		margin-top:200rpx;
		width:300rpx;
		height:300rpx;
	}
	.appo-item:first-child{
		margin-top:70rpx;
	}
	.appo-item {
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 24rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		border: 1px solid #efefef;
		.item-top,
		.item-down {
			display: flex;
			// justify-content: space-between;

			.item-top-left {
				display: flex;
				align-items: center;
				flex:1;
				font-size: 24rpx;
				view:last-child{
					margin-top: 12rpx;
				}
			}
			.item-top-right{
				color: #585858;
				font-size: 24rpx;
			}
			.avatar {
				margin-right: 14rpx;
			}
		}

		.item-down {
			margin-top: 24rpx;
			align-items: flex-end;

			.item-top-left {
				flex-direction: column;
				align-items: flex-start;
				color: #585858;
			}

		}

	}
	.appointments {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 24rpx 0rpx 24rpx;
	}
	
	.technicianName {
		font-size: 32rpx;
		font-weight: bold;
		font-family: SourceHanSansSC-bold;
		color: #000;
	}
	
	.technicianNum-box {
		margin-top: 10rpx;
		margin-left: 0rpx;
		width: auto;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 32rpx;
		background-color: #FEEAF3;
		text-align: center;
		// border: 2rpx solid rgba(255, 0, 0, 0);
		padding:0 4rpx;
	}
	
	.technicianNum {
		color: #FF203B;	
		font-size: 20rpx;
		font-family: PingFangSC-regular;
	}
	
	
	
	
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 310rpx;
		border: 4rpx solid rgba(245, 245, 245, 1);
	}
	
	.item-down-right{
		background-color: #FF203B;
		width: 140rpx;
		height: 52rpx;
		border-radius: 40rpx;
		line-height: 50rpx;
		text-align: center;
		color: rgba(255, 255, 255, 1);
		font-size: 22rpx;
		color: #FFFFFF!important;
		box-sizing: border-box;
	}
	.cancel-order{
		background-color: rgba(0,0,0,0);
		border: 2rpx solid #FF203B;
		color: #FF203B!important;
		box-sizing: border-box;
	}
</style>
